<template>
    <div class="tuijian">
        <div class="tittle">
            <div class="img"></div>
            <div class="img"></div>
            <div class="font">
                推荐·<span>RECOMMEND</span>
            </div>

            <div class="img"></div>
            <div class="img"></div>
        </div>
        <div class="shangPin">
            <ul class="spList">
                <li>
                    <img src="../../assets/img/首页/购物车/男士护理.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/购物车/女士香水.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/购物车/女士香水.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../../assets/img/首页/购物车/男士护理.png" alt="">
                    <div class="inner">
                        <h1>2件加购Malizia/玛莉吉亚男士私处护理液200ml</h1>
                        <span>24H发货</span>
                        <div class="price">
                            <div class="r-price">
                                <span>￥39</span>/份
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.tuijian {
    .tittle {
        font-weight: 700;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;

        .img {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #DEDEDE;
        }

        span {
            color: #2FA2CF;
        }

        .font {
            margin: 0 10px;
        }
    }

    .shangPin {
        .spList {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;

            li {
                margin: 5px 3px;
                width: 48%;
                background-color: #fff;
                border-radius: 0px;
                overflow: hidden;
                >img {
                    width: 100%;
                }

                .inner {
                    width: 90%;
                    margin: 0 auto;

                    h1 {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        margin-bottom: 10px;
                    }

                    >span {
                        color: #2FA2CF;
                        border: 1px solid #2FA2CF;
                        font-size: 14px;
                    }

                    .price {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;

                        .r-price {
                            color: #E0E0E0;
                            font-size: 14px;

                            span {
                                color: #F6592C;
                                font-weight: 700;
                            }
                        }

                        img {
                            width: 25px;
                        }
                    }
                }

            }
        }
    }
}
</style>